<template>
	<view class="box-login">
		<image src="../../static/images/login_bg.png" mode="widthFix" class="w750"></image>
		<view class="title">
			资阳临空招商项目管理系统
		</view>
		<image src="../../static/images/icon_person.png" mode="widthFix" class="img-avator"></image>
		<view class="login-form-box">
			<view class="login-form-header">
				<view class="line"></view>
				<text class="text">欢迎登录</text>
			</view>
			<view class="login-form" v-if="loginType==1">
				<form @submit='toLogin'>
					<button class="btn-wechat" open-type="getPhoneNumber"
						@getphonenumber='getPhone'>授权登录</button>
					<button class="btn-sbumit"  @click="showInput">密码登录</button>
				</form>
			</view>
			
			<view class="login-form" v-if="loginType==2">
				<form @submit='toLogin'>
					<view class="uni-form-item">
						<image src="../../static/images/login_icon_01.png" mode="widthFix" class="icon"></image>
						<input class="uni-input" name="username" placeholder="请输入用户名" />
					</view>
					<view class="uni-form-item mag">
						<image src="../../static/images/login_icon_02.png" mode="widthFix" class="icon"></image>
						<input class="uni-input" name="password" placeholder="请输入密码" />
					</view>
					<button class="btn-sbumit-login" form-type="submit">密码登录</button>
				</form>
			</view>

		</view>
	</view>

</template>

<script>
	import {hexMD5} from '../../common/js/md5.js';
	import {
		checkStr
	} from '../../common/js/util.js'

	export default {
		data() {
			return {
				loginType: 1
			}
		},
		methods: {
			async toLogin(e) {
				
				const username = e.detail.value.username;
				const password = e.detail.value.password;
			
				// if (!checkStr(username,'mobile')) {
				// 	uni.showToast({
				// 		title: "手机号不正确",
				// 		icon: "none"
				// 	})
				// 	return;
				// }
				if(!username){
					uni.showToast({
						title: "请输入用户名",
						icon: "none"
					})
					return;
				}
				if (!password) {
					uni.showToast({
						title: "请输入密码",
						icon: "none"
					})
					return;
				}
				uni.showLoading()
				const ret = await this.$req({
					url: 'sso/userlogin.do',
					method:'POST',
					data: {
						username: username,
						password: hexMD5(password),
						verifyCode: '2222',
						sourcefrom: 'wx'
					}
				})
				uni.hideLoading()
				if(ret.data.success){
				
					const token = ret.data.attributes.TT_TOKEN.split(',')[0]
					wx.setStorageSync('token',token)
					setTimeout(function(){
						uni.switchTab({
							url: '../index/index'
						})
					},1000)
					
				} else {
			
					uni.showToast({
						title:ret.data.messages[0].content,
						icon: "none"
					})
				}
			
				
			},
			wxLogin() {
				this.loginType = 1;
			},
			
			async getPhone(e) {
				const self = this;
				if(!this.code){
					return;
				}
				if(e.detail.errMsg=== "getPhoneNumber:ok"){
					console.log(e.detail)
					const params = {
						encryptedData:e.detail.encryptedData,
						iv:e.detail.iv,
						code:this.code
					}
					uni.showLoading({
						
					})
					const ret = await this.$req({
						url: 'sso/authLogin.do',
						method:'POST',
						data:params
					})
					console.log('TT_TOKEN',ret.data.attributes.TT_TOKEN)
					
					
					uni.hideLoading()
					if(ret.data.success){
						const token = ret.data.attributes.TT_TOKEN
						wx.setStorageSync('token',token)
						setTimeout(function(){
							uni.switchTab({
								url: '../index/index'
							})
						},1000)
					} else {
						uni.showToast({
							title:ret.data.messages[0].content,
							icon: "none"
						})
						self.loginType = 2;
					}
					
				}
			},
			showInput(){
				
				this.loginType = 2
			},
			async getDicData(){
				const ret =  await this.$api.getDicData();
				uni.setStorageSync('dicData',JSON.stringify(ret))
			}
		},
		onLoad() {
			const self = this;
			uni.showLoading()
			this.getDicData()
			const token = wx.getStorageSync('token')
				if(token){
					uni.switchTab({
						url: '../index/index'
					})
					return;
				}
			uni.login({
			  provider: 'weixin',
			  success: function (res) {
				if(res.errMsg === 'login:ok'){
					console.log('code',res.code)
					self.code = res.code;
					uni.hideLoading()
				}
			  }
			});
		},
		onShareAppMessage() {
			return {
				imageUrl: 'https://www.szaez.com/sck/share.jpg?v=' + new Date().getTime()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box-login {
		position: relative;
	}

	.img-login-bg {
		width: 750rpx;

	}

	.title {
		font-size: 40rpx;
		height: 38rpx;
		line-height: 38rpx;
		letter-spacing: 4px;
		color: #ffffff;
		text-align: center;
		top: 40rpx;
		width: 100%;
		position: absolute;
	}

	.img-avator {
		width: 180rpx;
		top: 108rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.login-form-box {
		width: 600rpx;
		background-color: #ffffff;
		box-shadow: 0px 0px 40px 0px rgba(0, 34, 72, 0.21);
		border-radius: 30px;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		top: 328rpx;
		padding: 40rpx 50rpx 63rpx 50rpx;
	}

	.login-form-header {
		display: flex;
		align-items: center;

		.line {
			width: 10rpx;
			height: 38rpx;
			background-color: #00b5df;
			border-radius: 2px;
			margin-right: 9rpx;
		}

		.text {
			font-size: 40rpx;
			font-weight: normal;
			font-stretch: normal;
			letter-spacing: 2px;
			color: #00b5df;
		}
	}

	.login-form {
		margin-top: 74rpx;
	}

	.btn-wechat {
		background-image: linear-gradient(-90deg,
				#3bed6e 0%,
				#0ecf57 100%),
			linear-gradient(#49b6c7,
				#49b6c7);
		background-blend-mode: normal,
			normal;
		border-radius: 30px;
		color: #fff;
		margin-bottom: 40rpx;
		margin-top: 60rpx;
	}

	.btn-sbumit {
		background-image: linear-gradient(-90deg,
				#3bcbed 0%,
				#0e9ecf 100%),
			linear-gradient(#49b6c7,
				#49b6c7);
		background-blend-mode: normal,
			normal;
		border-radius: 30px;
		color: #FFFFFF;
		width: 100%;
	}
	.btn-sbumit-login{
		background-image: linear-gradient(-90deg,
				#3bcbed 0%,
				#0e9ecf 100%),
			linear-gradient(#49b6c7,
				#49b6c7);
		background-blend-mode: normal,
			normal;
		border-radius: 30px;
		color: #FFFFFF;
		width: 100%;
		margin-top: 40rpx;
	}
	.uni-form-item {
		border-bottom: 1px solid #ececec;
		position: relative;
		display: flex;
		align-items: center;
		height: 80rpx;

		.icon {
			width: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;
		}

		&.mag {
			margin-top: 18rpx;
		}
	}
</style>
